<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			input[type='text'], select{
				width: 100%;
				padding: 12px 20px;
				margin: 8px 0;
				display: inline-block;
				border: 1xp solid #ccc;
				border-radius: 4px;
				box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
			}
			input[type='submit']{
				display: block;
				width: 100%;
				padding: 12px 20px;
				margin: 8px 0;
				cursor: pointer;
				background-color: #4CAF50;
				border: none;
				color: white;
			}
			
			input[type='submit']:hover{
				background-color: #45a049;
			}
			input[type='text']{
				background-color: #3CBC8D;
				border: none;
				color: white;
				box-sizing: border-box;
				background-image: url("http://gips0.baidu.com/it/u=1690853528,2506870245&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024");
				background-repeat: no-repeat;
				background-position: 10px 10px;
			}
			input[type='text']:focus{
				background-color: aqua;
			}
			label{
				display: inherit;
			}
			@media screen and (max-width:100px){
				label{
					display: block !important;
				}
			}
			
		</style>
	</head>
	<body>
		<div style="width:400px;background-color: #ccc;padding: 10px;border-radius: 5px;">
			<form accept="https://www.baidu.com">
				<label for="name">姓氏</label>
				<input type="text" id="fname" name="firstname" placeholder="请输入你的姓氏"/>
				
				<label for="lname">名称</label>
				<input type="text" id="lname" name="lastname" placeholder="请输入你的名字"/>
				
				<label for="country">爱好</label>
				<select id="country" name="country">
					<option value="1">打篮球</option>
					<option value="2">听音乐</option>
					<option value="3">踢足球</option>
				</select>
				
				<input  type="submit" value="提交"/>
			</form>
		</div>
	</body>
</html>